<template>
  <div>
    <div class="n-srchrst" v-if="flag">
      <div class="srchSongst">
        <div
          class="item f-cb h-flag clearfix"
          v-for="(item, index) in songs"
          :key="item.id"
          :class="index % 2 ? 'even' : ''"
        >
          <div class="td">
            <div class="hd">
              <a class="ply" title="播放" @click="play(item)"></a>
            </div>
          </div>
          <div class="td w0">
            <div class="sn">
              <div class="text">
                <router-link
                  :to="{
                    name: 'songpage',
                    query: {
                      id: item.id,
                    },
                  }"
                  :title="item.name"
                  >{{ item.name }}</router-link
                >
                <a title="MV" class="mv" href="javascirpt:;" v-if="item.mv"></a>
              </div>
            </div>
          </div>
          <div class="td">
            <div class="opt hshow">
              <AddIcon :data="item"></AddIcon>
              <CollectIcon></CollectIcon>
              <ShareIcon></ShareIcon>
              <DownLoadIcon></DownLoadIcon>
            </div>
          </div>
          <div class="td w1">
            <div class="text" v-html="meageElement(item.ar)"></div>
          </div>
          <div class="td w2">
            <div class="text">
              <a class="s-fc3" href="javascript:;" :title="`《${item.al.name}》`"
                >《{{ item.al.name }}》</a
              >
            </div>
          </div>
          <div class="td" v-text="formattingTime(item.dt)"></div>
        </div>
      </div>
    </div>
    <el-skeleton :rows="10" v-else class="n-srchrst" />
  </div>
</template>

<script>
import AddIcon from "@/encapsulation/SongFn/AddIcon.vue";
import CollectIcon from "@/encapsulation/SongFn/CollectIcon.vue";
import DownLoadIcon from "@/encapsulation/SongFn/DownLoadIcon.vue";
import ShareIcon from "@/encapsulation/SongFn/ShareIcon.vue";

import { meageElement } from "@/baseFnMixin/mergeName/mergeNameMixin.js";
import { formattingTime } from "@/baseFnMixin/formattingTime/formattingTime.js";
import clickPlay from "@/baseFnMixin/playlist/addAndPlaySongMixin.js";
export default {
  name: "SearchBody",
  props: { songs: { type: Array }, flag: { type: Boolean } },
  components: { AddIcon, CollectIcon, DownLoadIcon, ShareIcon },
  setup() {
    const play = clickPlay();
    return {
      meageElement,
      formattingTime,
      play,
    };
  },
};
</script>

<style scoped lang="less">
.n-srchrst {
  margin-top: 20px;
  .srchsongst {
    .item {
      padding: 10px 10px 8px 18px;
      border: 1px solid #fff;
    }
  }
  .even {
    background: #f7f7f7;
    border-color: #f7f7f7;
  }
}

.item {
  padding: 10px 10px 8px 18px;
  border: 1px solid #fff;
  &:hover {
    background-color: #f2f2f2;
    .hshow {
      visibility: visible;
    }
  }
}
.td {
  float: left;
  margin-right: 5px;
}
.hd {
  height: 17px;
  width: 17px;
}
.ply {
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-right: 15px;
  cursor: pointer;

  background: url("../../common/images/table.png") no-repeat 0 -103px;
}
.w0 {
  width: 370px;
  .text {
    position: relative;
    display: inline-block;
    padding-right: 25px;
    width: auto;
    max-width: 100%;
    height: 20px;
  }
}
b {
  font-weight: normal;
}
.mv {
  position: absolute;
  right: 0;
  display: inline-block;
  vertical-align: middle;
  width: 23px;
  height: 17px;
  background: url("../../common/images/table.png") no-repeat 0 -151px;
}
.w1 {
  width: 15%;
  margin-right: 12px;
}
.text {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.w2 {
  width: 18%;
  margin-right: 12px;
  min-height: 16px;
}
.opt /deep/ {
  .collect {
    margin: 0 0 0 4px;
  }
  .add {
    margin: 2px 0 0 4px;
  }
}
.hshow {
  visibility: hidden;
}
</style>
